import React from 'react'
import IconButton from 'material-ui/IconButton';
import ContentClear from 'material-ui/svg-icons/content/clear';

const myStyles = {
    row: {display: 'flex', alignItems: 'center'},
    twiceRem: {height: '2rem'},
}

export default class Options extends React.Component {
    render() {
        const options = this.props.options.map((option, index) => {
            return (
                <div key={index} style={{...myStyles.row, ...myStyles.twiceRem}}>
                    <p>{option.text}</p>
                    <IconButton onClick={()=>{this.props.removeOption(index)}} children={<ContentClear/>}/>
                </div>
            )
        })
        return options
    }
}
